<template>
    <div>
        <div class="plan-flex plan-between">
            <div class="plan-flex plan-direction" style="width: 100%">
                <div class="plan-box-header plan-flex-bcenter" style="padding: 10px">
                        <span class="title-line">
                            作业计件统计
                        </span>
                    <div>
                        <el-button @click="handleClass" v-if="power('TALLY_PIECE_PORT')">港口日期班组统计
                        </el-button>
                    </div>
                </div>
                <div class="plan-box plan-flex plan-direction" style="min-width: 1000px;max-width: 1400px">
                    <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="作业港口">
                                    <select-port v-model="condition['search_EQ_portCode']"
                                                 @select="changePort" :isMultiple = "true"></select-port>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="plan-flex plan-between">
                        <div class="plan-flex plan-direction">
                            <z-month ref="month" @data="handleMonth" @month="handleSetDay"
                                     :getData="getMonth"></z-month>
                            <div id="line" @mouseenter="onChartClickLine" @mouseleave="offChartClickLine"
                                 class="cash-style"></div>
                        </div>
                        <div>
                            <z-day ref="day" @get-day="handleDay" :getData="getDay"></z-day>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<el-button @click="handleRouterPush({path: '/work/classCount',name: '港口日期班组统计'})"></el-button>-->
    </div>
</template>

<script>
    import { getWorkPieceMonth, getWorkPieceDay } from "@/api/balance/balance";
    import zMonth from '@/components/calendar/z-month'
    import zDay from '@/components/calendar/z-day'
    import selectPort from '@/components/select/selectPort'
    import { getLocalTime } from "@/utils/dateFormat";

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/line");
    export default {
        name: "作业计件",
        components: {
            zMonth, zDay, selectPort
        },
        data() {
            return {
                getMonth: getWorkPieceMonth,
                getDay: getWorkPieceDay,
                line: '',
                condition: {},
                created: true,
                createdPortCode : []
            }
        },
        mounted() {
            this.loadData()
        },
        activated() {
            if (!this.created) {
                this.loadData()
            }
        },
        methods: {
            loadData() {
                this.created = false
                this.$refs.month.search = 'search_IN_portCode'
                this.$refs.month.isManyChoice = true
                this.$refs.month.keyWords = this.createdPortCode
                this.$refs.month.getMonthDay()
                // this.$refs.day.search='search_EQ_portCode'
                // this.$refs.day.keyWord=this.condition['search_EQ_portCode']
                // this.$refs.day.getMonthDay()
            },
            handleMonth(item) {
                console.log(item)
                let month = []
                let data = []
                for (let i = 0; i < item.length; i++) {
                    const el = item[i]
                    month.push(el.month)
                    data.push(el.piece)
                }
                this.line = echarts.init(
                    document.getElementById("line"),
                    "macarons"
                )
                this.line.setOption({
                    title: {
                        text: '工时',
                        x: 'center',
                        top: 20
                    },
                    legend: {
                        data: ['工时'],
                        right: 10,
                        top: 20,
                        orient: 'vertical',
                        // y:'center',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: month
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '工时',
                        data: data,
                        type: 'line',
                        smooth: false
                    }]
                })
            },
            handleClass() {
                let classCountIndex = JSON.stringify({
                    date: getLocalTime(new Date().getTime(), 'YYYY-MM-DD'),
                    port: this.condition['search_EQ_portCode']
                })
                sessionStorage.setItem('classCountIndex', classCountIndex)
                this.handleRouterPush({ path: '/work/classCount', name: '港口日期班组统计' })
            },
            onChartClickLine() {
                this.line.on('click', (param) => {
                    const { seriesName, name } = param
                    // this.condition.search_LIKE_portName = seriesName
                    // this.getTotal();
                })
            },
            offChartClickLine() {
                this.$nextTick(() => {
                    this.line.off('click')
                })
            },
            handleRouterPush(val) {
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
            handleSetDay(item) {
                console.log(item)
                this.$refs.day.setYear = item.month.split('-')[0]
                this.$refs.day.setMonth = item.months
                if (this.condition['search_EQ_portCode']) {
                    this.$refs.day.search = 'search_IN_portCode'
                }
                this.$refs.day.isManyChoice = true
                this.$refs.day.keyWords = this.createdPortCode
                this.$refs.day.getMonthDay()
            },
            changePort(val) {
                console.log(val)
                if (val != null && val != ""){
                    val=[val]
                }
                this.createdPortCode = val
                this.$nextTick(() => {
                    this.$refs.month.search = 'search_IN_portCode'
                    this.$refs.month.isManyChoice = true
                    this.$refs.month.keyWords = val
                    this.$refs.month.getMonthDay()
                })
            },
            handleDay(val) {
                let classCountIndex = JSON.stringify({
                    date: val.day,
                    port: this.condition['search_EQ_portCode']
                })
                sessionStorage.setItem('classCountIndex', classCountIndex)
                this.handleRouterPush({ path: '/work/classCount', name: '港口日期班组统计' })
            }
        }
    }
</script>

<style scoped>
    .plan-box {
        padding: 20px;
        border: 1px solid #dddddd;
    }

    .plan-box-header {
        border: 1px solid #dddddd;
        border-bottom: none;
    }

    .plan-box-header p {
        padding: 10px;
    }

    .plan-flex {
        display: flex;
    }

    .plan-flex-bcenter {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .plan-between {
        justify-content: space-between;
    }

    .plan-direction {
        flex-direction: column;
    }

    .cash-style {
        height: 400px;
        width: 100%;
    }
</style>
